<template>
    <div>
        <div
            class="w-screen h-screen flex flex-col items-center justify-center min-h-[60vh] bg-gray-50 rounded-lg shadow p-8 mx-auto">
            <img src="https://avatars.githubusercontent.com/u/00000000?v=4" alt="头像"
                class="w-24 h-24 rounded-full shadow mb-4 border-2 border-gray-200 object-cover" />
            <h1 class="text-2xl font-bold mb-2 text-gray-800">Cookies</h1>
            <div class="mb-4">
                <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded mr-2">全栈开发</span>
                <span class="inline-block bg-green-100 text-green-700 text-xs px-2 py-1 rounded mr-2">Vue3</span>
                <span
                    class="inline-block bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded mr-2">SpringBoot</span>
                <span class="inline-block bg-purple-100 text-red-700 text-xs px-2 py-1 rounded">微服务</span>
            </div>
            <p class="text-gray-600 mb-4 text-center text-sm">
                热爱技术，探索未知，畅想未来。
            </p>
            <div class="flex space-x-6 mt-2">
                <a href="mailto:wzy9858@qq.com" class="group flex items-center space-x-1 text-blue-500 hover:underline">
                    <!-- 邮箱图标 -->
                    <svg class="w-5 h-5 group-hover:scale-110 transition" fill="none" stroke="currentColor"
                        stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M16 12l-4-4-4 4m8 0v6a2 2 0 01-2 2H6a2 2 0 01-2-2v-6m16-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v4" />
                    </svg>
                    <span>邮箱</span>
                </a>
                <a href="https://github.com/your-github" target="_blank"
                    class="group flex items-center space-x-1 text-gray-700 hover:text-black">
                    <!-- GitHub图标 -->
                    <svg class="w-5 h-5 group-hover:scale-110 transition" fill="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M12 2C6.48 2 2 6.58 2 12.26c0 4.49 2.87 8.3 6.84 9.64.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7-2.78.62-3.37-1.36-3.37-1.36-.45-1.18-1.1-1.5-1.1-1.5-.9-.63.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.74-.1-.26-.45-1.3.1-2.7 0 0 .84-.28 2.75 1.04A9.38 9.38 0 0112 6.84c.85.004 1.71.11 2.51.32 1.91-1.32 2.75-1.04 2.75-1.04.55 1.4.2 2.44.1 2.7.64.71 1.03 1.62 1.03 2.74 0 3.94-2.34 4.81-4.57 5.07.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.58.69.48C19.13 20.56 22 16.75 22 12.26 22 6.58 17.52 2 12 2z" />
                    </svg>
                    <span>GitHub</span>
                </a>
                <a href="/" target="_blank" class="group flex items-center space-x-1 text-green-600 hover:underline">
                    <!-- 博客图标 -->
                    <svg class="w-5 h-5 group-hover:scale-110 transition" fill="none" stroke="currentColor"
                        stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 20l9-5-9-5-9 5 9 5z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 12V4l9 5-9 5-9-5 9-5z" />
                    </svg>
                    <span>博客</span>
                </a>
            </div>
        </div>

        <div class="w-screen h-screen mx-auto bg-white rounded-lg shadow p-6 flex justify-center">
            <div class="md:w-1/2">
                <!-- 这里是此博客的简介 里面应该有博客使用的技术栈 还有一些说明 -->
                <h2 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                    <svg class="w-6 h-6 mr-2 text-blue-400" fill="none" stroke="currentColor" stroke-width="2"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 20l9-5-9-5-9 5 9 5z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 12V4l9 5-9 5-9-5 9-5z" />
                    </svg>
                    博客简介
                </h2>
                <p class="text-gray-600 leading-relaxed text-base mb-4">
                    欢迎来到我的个人博客！这里记录着我的学习笔记、技术分享与成长历程。无论是前端开发、后端实践，还是架构思考与生活感悟，都希望能在这里与你产生共鸣。
                </p>
                <div class="mb-2">
                    <span class="inline-block bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded mr-2 mb-1">技术栈</span>
                    <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded mr-2 mb-1">Vue3</span>
                    <span
                        class="inline-block bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded mr-2 mb-1">TailwindCSS</span>
                    <span
                        class="inline-block bg-green-100 text-green-700 text-xs px-2 py-1 rounded mr-2 mb-1">SpringCloud</span>

                    <span
                        class="inline-block bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded mr-2 mb-1">SpringBoot</span>
                    <span
                        class="inline-block bg-pink-100 text-pink-700 text-xs px-2 py-1 rounded mr-2 mb-1">MySQL</span>
                    <span class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded mb-1">Redis</span>
                </div>
                <p class="text-gray-500 text-sm mt-2">
                    本站采用 Vue3 + TypeScript + TailwindCSS 前端技术栈，后端基于 SpringBoot 微服务架构，数据库使用 MySQL,Redis.<br>
                    本项目历时近半年,目前仍在开发中。<br>
                    欢迎交流与指正，期待与你共同进步！
                </p>

                <p class="mt-4 flex items-center text-blue-500 hover:underline cursor-pointer">
                    <!-- 日志图标 -->
                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
                    </svg>
                    <a href="/logs" class="hover:underline">查看开发日志</a>
                </p>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
// 可根据需要添加逻辑
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
</style>